/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-26 15:36:37
 */
import { useRequest, useSearch } from '@/hooks'
import { defaultParams, deleteData, } from '@/utils'
import { clone, } from 'ramda'
import { defineComponent, reactive, toRaw, } from 'vue'
import CreateIndex from './components/createIndex'
import { rows, columns } from './uilts'
export default defineComponent({
    name: 'Banner',
    setup() {
        const pageState = reactive({
            visible: false,
            dataSource: {} as defs.server.BannerEntity,
        })
        const { searchForm, expand, expandToggle } = useSearch<API.server.banner.getBannerPage.Params>({
            ...clone(defaultParams)
        })
        function search(is = true) {
            const params = clone(toRaw(searchForm.value))
            run({
                ...params,
                ...getPagination(is),
            } as any)
        }
        function clear() {
            searchForm.value = { ...defaultParams }
            search()
        }
        const { run, data, getPagination, renderPagination, loading } = useRequest(
            API.server.banner.getBannerPage.request,
            {
                manual: true,
                pagination: true,
                defaultParams: [{
                    ...defaultParams
                }]
            }
        )
        function actionRender({ record }: F.RableSlotScope<defs.server.BannerEntity>) {
            return (
                <a-space size="middle" style="gap:0">
                    <a-button
                        type="link"
                        onClick={() => {
                            pageState.dataSource = clone(record)
                            pageState.visible = true
                        }}
                    >
                        编辑
                    </a-button>
                    <a-button type="link" danger onClick={() =>
                        deleteData({ id: record.id as number },
                            API.server.banner.deleteBanner.request,
                            () => search(false))}>
                        删除
                    </a-button>
                </a-space>
            )
        }
        function tableHeader() {
            return [
                <a-button
                    type="primary"
                    onClick={() => {
                        pageState.visible = true
                        pageState.dataSource = {} as defs.server.BannerEntity
                    }}
                >
                    新增
                </a-button>,
            ]
        }
        return () => (
            <div>
                <f-search
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    loading={loading.value}
                    clear={clear}
                    search={search}
                    expand={{
                        value: expand.value,
                        expandToggle,
                    }}
                    searchKey="noticeSearchKey"
                    model={searchForm.value}
                    rows={rows}
                />
                <f-table
                    v-slots={{ header: tableHeader, actionRender }}
                    columns={columns}
                    dataSource={data.value.data?.data ?? []}
                    loading={loading.value}
                    rowKey="id"
                    tableKey="noticeTable"
                />
                {renderPagination()}
                <CreateIndex
                    visible={pageState.visible}
                    dataSource={pageState.dataSource}
                    onCancel={() => {
                        pageState.visible = false
                        pageState.dataSource = new defs.server.BannerEntity()
                    }}
                    onSearch={() => search(false)}
                />
            </div>
        )
    },
})
